<!--  -->
<template>
  <view class="userInfoContent">
    <view class="basicInfo">
      <view class="noImage"></view>
      <text>立即登陆</text>
    </view>
    <view class="basicContent">
      <view class="basicItem" v-for="item in basicModuleList" :key="item.text">
        <text>{{ item.data }}</text>
        <text>{{ item.text }}</text>
      </view>
    </view>
    <view class="basicUtilsContent">
      <text class="title">常用工具</text>
      <view class="basicUtils">
        <view class="utilsItem" v-for="item in utilsList" :key="item.text">
          <!-- <image :src="item.url"></image> -->
          <text :class="['iconfont', item.url]"></text>
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
interface DataProps {
  basicModuleList: {
    page: string
    data: string | number
    text: string
  }[]
  utilsList: {
    page: string
    url: string
    text: string
  }[]
}
const state = reactive<DataProps>({
  utilsList: [
    {
      url: 'icon-kefujieru',
      text: '我的地址',
      page: '/pages/userInfo',
    },
    {
      url: 'icon-kefujieru',
      text: '客服咨询',
      page: '/pages/userInfo',
    },
    {
      url: 'icon-lijipingjia',
      text: '我的评价',
      page: '/pages/userInfo',
    },
  ],
  basicModuleList: [
    {
      data: '—',
      text: '账户余额',
      page: '/pages/userInfo',
    },
    {
      data: '—',
      text: '获得返利',
      page: '/pages/userInfo',
    },
    {
      data: '—',
      text: '优惠券',
      page: '/pages/userInfo',
    },
    {
      data: '—',
      text: '会员积分',
      page: '/pages/userInfo',
    },
  ],
})
const { basicModuleList, utilsList } = toRefs(state)
</script>
<style lang="scss">
page {
  background: $colorf8;
}
@import './index.scss';
</style>
